<template>
  <main class="container">
    <div class="content" v-if="!!getToken()">
      <!-- user -->
      <van-card class="user_card" :thumb="userStore.avatar">
        <template #title>
          <p class="user_name">{{ userStore.name }}</p>
        </template>
        <template #desc>
          <p class="user_desc">{{ userStore.sex == 1 ? "男" : "女" }}</p>
        </template>
        <template #tags>
          <p class="user_sign">{{ userStore.sign }}</p>
        </template>
      </van-card>
      <!-- 我的XX -->
      <div style="background: #f0f0f0; padding: 10px">
        <van-cell
          title="我的收货地址"
          icon="logistics"
          is-link
          to="/address-list"
        />
        <van-cell title="我的订单" icon="orders-o" is-link to="/order" />
        <van-cell
          title="我的文章"
          icon="description"
          is-link
          to="/my-article"
        />
        <van-cell title="我的收藏" icon="star-o" is-link to="/my-collection" />
        <van-cell title="我的点赞" icon="good-job-o" is-link to="/thumbs-up" />
      </div>
      <!-- 登出 -->
      <div class="logout_box">
        <van-button class="logout_btn" type="warning" @click="logOut"
          >退出登录</van-button
        >
      </div>
    </div>
    <!-- 未登录 -->
    <div v-else>
      <van-empty description="请先登录">
        <van-button
          @click="router.replace('/login')"
          round
          type="primary"
          style="width: 200px"
          >按钮</van-button
        >
      </van-empty>
    </div>
  </main>
</template>

<script setup>
import { showConfirmDialog, showSuccessToast } from "vant";
import useUserInfo from "@/stores/useUserInfo";
import { useRouter } from "vue-router";
import { logout } from "@/api/user";
import { getToken, removToken } from "@/utils/token";

let router = useRouter();
let userStore = useUserInfo();

let logOut = () => {
  showConfirmDialog({
    title: "确认登出",
    message: "是否确认退出登录",
  })
    .then(async () => {
      // on confirm
      await logout({ token: getToken() });
      removToken();
      showSuccessToast("登出成功");
      router.replace("/login");
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style lang="scss" scoped>
main.container {
  .user_card {
    background: #f0f0f0;
    margin-bottom: 10px;
    .user_name {
      line-height: 20px;
      margin-top: 2px;
      font-size: 20px;
      color: aqua;
    }
    .user_desc {
      line-height: 20px;
      margin: 6px 0;
    }
    .user_sign {
      line-height: 20px;
      font-size: 12px;
    }
  }
  .content {
    width: 100%;
    .logout_box {
      margin-top: 18px;
      padding: 0 10px;
      .logout_btn {
        width: 100%;
      }
    }
  }
  .no_login_content {
    .login_btn {
      width: 180px;
    }
  }
}
</style>